<!DOCTYPE html> 
<html>
<head>
	<meta charset="utf-8"> 
	<title>Tangram-Grid</title>
	<script type="text/javascript" src="../tangram/tangram-1.3.9.source.js"></script>
	<script type="text/javascript" src="../tangram/tangram.baseUI.source.js"></script>
	<script type="text/javascript" src="../tangram/tangram.grid.js"></script>
	<script type="text/javascript" src="../tangram/tangram.grid.keyboard.js"></script>
	<script type="text/javascript" src="../tangram/tangram.grid.columndragsort.js"></script>
	<link rel="stylesheet" href="../resources/tangram.grid.css" />
</head>
<body>
<div id="firsttangramgrid"></div>
<script type="text/javascript">
	//初始化
	var griddemo = new baidu.ui.Grid({
		element:"firsttangramgrid",
		columndraggable:true,
		columns:[
			{field:'id',width:30,renderer:'checkbox'},
			{field:'name',header:"机器名称",fix:true},
			{field:'creator',header:"创建人",width:200},
			{field:'dataKey',header:"dataKey",width:400,align:"right",renderer:function(data){return data.cellvalue+"-formated";}},
			{field:'lastVersion',header:"lastVersion",width:200},
			{field:'createTime',header:"创建时间",width:180}
		],
		height:200,
		autoHeight:false,
		selectMode:1,
		selectBy:"status",
		hoverhighlight:true,
		loadMask:true,
		//集成自定义分页控件可以在此处定义分页的容器html，在表格初始化完毕后初始化分页控件
		//page:"<div>这是一个简单的分页<input type='button' value='到最后一页' id='btnLastPage' /></div>",
		//docktop:"<div>如果需要，可以在表格上方添加标题</div>",
		url:"noahdata.json",
		ajaxOption:{
			method:"POST",
			data:"a=1"
		},
		order:"asc",//初始状态按照CODE 升序排序
		orderBy:2,
		onRowClick:function(e,data){
			//debugger;
		},
		onCellClick: function(e, data){
			//debugger;
		},
		onSelect:function(e,data){
			//debugger;	
		},
		onUnSelect:function(e,data){
			//debugger;
		},
		onBeforeRequest:function (e,opt){
			//return false;//cancel ajax request if return false
		},
		onBeforeSort:function(e,data){
			//debugger;
			return true;
		},
		onRowDblClick:function(e,data){
			//console.log("dblclick:"+data.rowIndex);
		},
		keyboard:true
	});
	
	//ajax加载数据
	griddemo.request({b:2,a:3});
	
	
	griddemo.addEventListener("datafilter",function(e,griddata){
		//debugger;
	});
	
	//手动载入数据
	/*griddemo.loadData({data:{page:{total:32},list:[
			{"id":"42","nodeId":"1","name":"z0614_ui_sample_all","sysId":"3","creator":"yanxiao","createTime":"2011-06-14 14:58:37","lastVersion":"\u6682\u65e0","dataKey":"\/data\/82471ffb83615a57b9ab64826dd98061","publisher":"","publishTime":"","canAddVersion":1,"nodeName":"BAIDU","nodePath":"BAIDU"},
			{"id":"41","nodeId":"1","name":"z0614_bws_sample","sysId":"3","creator":"yanxiao","createTime":"2011-06-14 14:55:22","lastVersion":"\u6682\u65e0","dataKey":"\/data\/645307039c1307733346d2f74e990bb2","publisher":"","publishTime":"","canAddVersion":1,"nodeName":"BAIDU","nodePath":"BAIDU"},
			{"id":"40","nodeId":"1","name":"z0614_ui_sample","sysId":"3","creator":"yanxiao","createTime":"2011-06-14 11:51:43","lastVersion":"\u6682\u65e0","dataKey":"\/data\/e80a106b9e02175e161edcccca00ff8a","publisher":"","publishTime":"","canAddVersion":1,"nodeName":"BAIDU","nodePath":"BAIDU"},
			{"id":"39","nodeId":"1","name":"yzjtest061300","sysId":"3","creator":"yanxiao","createTime":"2011-06-13 17:33:56","lastVersion":"\u6682\u65e0","dataKey":"\/data\/d264625a61e7b9b772437ccbd0b39822","publisher":"","publishTime":"","canAddVersion":1,"nodeName":"BAIDU","nodePath":"BAIDU"},
			{"id":"38","nodeId":"1","name":"cuijie_test","sysId":"3","creator":"yanxiao","createTime":"2011-06-13 15:05:56","lastVersion":"\u6682\u65e0","dataKey":"\/data\/107ffcb12c5c83c7db299624fd6f17ae","publisher":"","publishTime":"","canAddVersion":1,"nodeName":"BAIDU","nodePath":"BAIDU"},
			{"id":"37","nodeId":"1","name":"test_da_reload","sysId":"3","creator":"yanxiao","createTime":"2011-06-09 15:10:34","lastVersion":"\u6682\u65e0","dataKey":"\/data\/d7c7da05c6a6a371ecb6ad809c60e0e9","publisher":"","publishTime":"","canAddVersion":1,"nodeName":"BAIDU","nodePath":"BAIDU"},
			{"id":"36","nodeId":"1","name":"test_da","sysId":"3","creator":"yanxiao","createTime":"2011-06-09 15:09:39","lastVersion":"\u6682\u65e0","dataKey":"\/data\/a5ee0dac201f21956d7c94834b2dc407","publisher":"","publishTime":"","canAddVersion":1,"nodeName":"BAIDU","nodePath":"BAIDU"},
			{"id":"35","nodeId":"1","name":"ui_single","sysId":"3","creator":"yanxiao","createTime":"2011-06-07 19:58:16","lastVersion":"\u6682\u65e0","dataKey":"\/data\/91e54f5ff3e195265c16f73b868b6122","publisher":"","publishTime":"","canAddVersion":1,"nodeName":"BAIDU","nodePath":"BAIDU"},
			{"id":"34","nodeId":"1","name":"yanzhijietest060791","sysId":"3","creator":"yanxiao","createTime":"2011-06-07 10:54:16","lastVersion":"\u6682\u65e0","dataKey":"\/data\/8ec675a0c09417a21a68f3ecae52cc24","publisher":"","publishTime":"","canAddVersion":1,"nodeName":"BAIDU","nodePath":"BAIDU"},
			{"id":"33","nodeId":"1","name":"z_bws_back","sysId":"3","creator":"yanxiao","createTime":"2011-06-03 19:15:17","lastVersion":"\u6682\u65e0","dataKey":"\/data\/6bf9c48c5ddd25bbf9df36b66ac22566","publisher":"","publishTime":"","canAddVersion":1,"nodeName":"BAIDU","nodePath":"BAIDU"}
		]}});*/
	
	/*griddemo.addEventListener("headercellclick",function(e,data){
	});*/
	
	function row_operate(){
		griddemo.addRow({"id":"33","nodeId":"1","name":"New Machine","sysId":"3","creator":"griddemo","createTime":(new Date()).toLocaleDateString()+" "+(new Date()).toLocaleTimeString(),"lastVersion":"\u6682\u65e0","dataKey":"the-dataKey","publisher":"","publishTime":"","canAddVersion":1,"nodeName":"BAIDU","nodePath":"BAIDU"},2);
		window.setTimeout(function(){
			griddemo.updateRow({"id":"33","nodeId":"1","name":"New Machine_after Updated","sysId":"3","creator":"griddemo-after-updated","createTime":(new Date()).toLocaleDateString()+" "+(new Date()).toLocaleTimeString(),"lastVersion":"\u6682\u65e0","dataKey":"the-dataKey-after-updated","publisher":"","publishTime":"","canAddVersion":1,"nodeName":"BAIDU","nodePath":"BAIDU"},2);
		},1000);
		window.setTimeout(function(){
			griddemo.deleteRow(2);
		},2000);
	}
	
	function row_dom_operate(){
		var rowIndex= griddemo.addDOMRow({"id":"33","nodeId":"1","name":"New Machine","sysId":"3","creator":"griddemo","createTime":(new Date()).toLocaleDateString()+" "+(new Date()).toLocaleTimeString(),"lastVersion":"\u6682\u65e0","dataKey":"the-dataKey","publisher":"","publishTime":"","canAddVersion":1,"nodeName":"BAIDU","nodePath":"BAIDU"},2);
		window.setTimeout(function(){
			griddemo.updateDOMRow({"id":"33","nodeId":"1","name":"New Machine_after Updated","sysId":"3","creator":"griddemo-after-updated","createTime":(new Date()).toLocaleDateString()+" "+(new Date()).toLocaleTimeString(),"lastVersion":"\u6682\u65e0","dataKey":"the-dataKey-after-updated","publisher":"","publishTime":"","canAddVersion":1,"nodeName":"BAIDU","nodePath":"BAIDU"},rowIndex);
		},1000);
		window.setTimeout(function(){
			griddemo.deleteDOMRow(rowIndex);
		},2000);
	}
	/*
	//模拟分页控件中的最后一页请求
	baidu.event.on(baidu.dom.g("btnLastPage"),"click",function(){
		var total = parseInt(griddemo.getData().data.page.total,10);
		var pages= parseInt((total+1)/10,10)+1;
		griddemo.request({curPage:pages,perPage:10});
	});
	*/
	
window.onresize = function(){//容器大小发生变化
	griddemo.resize();//重新调整大小
}
</script>
<input type="button" value="setSize"  onclick="griddemo.setSize({width:300,height:200});" />
<input type="button" value="setAutoWidth"  onclick="griddemo.setSize({width:'auto',height:400});" />
<input type="button" value="toggle Row 5"  onclick="griddemo.toggleSelectRow(5);" />
<input type="button" value="Hide dataKey Column"  onclick="griddemo.hideColumn(3);" />
<input type="button" value="Show dataKey Column"  onclick="griddemo.showColumn(3);" />
<input type="button" value="Order by dataKey desc "  onclick="griddemo.reOrder(3,'desc');" />
<input type="button" value="add/update/delete row"  onclick="row_operate()" />
<input type="button" value="add/update/delete DOM row"  onclick="row_dom_operate()" />
</body>
</html>
